<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PhotoWall2</title>
		<link rel="stylesheet" type="text/css" href="css/PhotoWall.css" />
	</head>
	<body>
		
		<div id = "app" class="box">
			<template v-for="(item,index) in srcList">
				<!-- <i class = "imgBorder" style="position: relative;"> -->
					<img class="photo" v-on:click="preView(index,$event)" :src="item"></img>
				<!-- </i> -->
				
			</template>
		</div>
		
		<script src="lib/vue.min.js"></script>
		<script src="lib/zx-image-viewer.min.js"></script>
		<script type="text/javascript">
		
			var app = new Vue({
				el:'#app',
				data:{
					srcList: [
					  'img/danji.jpg',
					  'img/dianwei.jpg',
					  'img/diaochan.jpg',
					  'img/sunshangxiang.jpg',
					  'img/sunwukong.jpg',
					  'img/luban.jpg',
					  'img/lanlinwang.jpg',
					  'img/kai.jpg',
					  'img/donghuang.jpg'
					],
					imgNodes : [],
					current:null
				},methods:{
					preView : function (index,event){

						if(this.current && this.current == this.imgNodes[index] 
						&& this.current.getAttribute('class')  === 'cphoto'){
							this.current.setAttribute('class','photo');
							return;
						}
						this.current = this.imgNodes[index];
						this.current.setAttribute('class','cphoto');
						// var ziv = new ZxImageViewer({},this.srcList);
						// ziv.view(index);
					}
				},
				created : function() {
					this.imgNodes = document.getElementsByTagName('IMG');
				}
			});
		
		</script>
	</body>
</html>
